<template>
	<view>
		<!-- 分享示例 -->
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<uni-popup-share></uni-popup-share>
		</uni-popup>
	</view>
	<view class="page">

		<view class="zuishangcen">
			<text>我的</text>
			<view class="tupianhezi1">
				<img class="duanxintupian" src="/static/img/duanxin.png" alt="">
			</view>
		</view>
		<view class="header" @tap="nicheng">

			<text>辣妈4004044</text>
			<img src="/static/img/xiugai.png" alt="">
		</view>


		<view class="hearder2">
			<view class="baobao">
				<text>2个月 男宝</text>
			</view>
			<view class="baobao">
				<text>一年 女宝</text>
			</view>
		</view>


		<view class="nav">
			<view class="shang" @click="gotoBaoBao()">
				<img src="/static/img/baobaoguanli.png" alt="">
				<text>宝宝管理</text>
				<view class="jiantouhezi">
					<img class="jiantou" src="/static/img/jiantouyou.png" alt="">
				</view>
			</view>
			<view class="zhong" @click="gotoShouCang()">
				<img src="/static/img/baikeshoucang.png" alt="">
				<text>百科收藏</text>
				<view class="jiantouhezi">
					<img class="jiantou" src="/static/img/jiantouyou.png" alt="">
				</view>
			</view>


			<view class="xia" @tap="dishCollect">

				<img src="/static/img/caipushoucang.png" alt="">
				<text>菜谱收藏</text>
				<view class="jiantouhezi">
					<img class="jiantou" src="/static/img/jiantouyou.png" alt="">
				</view>
			</view>

		</view>
		<view class="navzhongwai">
			<view class="navzhong" @click="shareToggle">
				<img src="/static/img/tuijian.png" alt="">
				<text>推荐给好友</text>
				<view class="jiantouhezi">
					<img class="jiantou" src="/static/img/jiantouyou.png" alt="">
				</view>
			</view>
		</view>
		<view class="navxiawai">

			<view class="navxiashang" @tap="kangBaby">

				<img src="/static/img/jiankang.png" alt="">
				<text>关于健康宝宝</text>
				<view class="jiantouhezi">
					<img class="jiantou" src="/static/img/jiantouyou.png" alt="">
				</view>
			</view>

			<view class="navxiaxia" @tap="shezhi">

				<img src="/static/img/shezhi2.png" alt="">
				<text>设置</text>
				<view class="jiantouhezi">
					<img class="jiantou" src="/static/img/jiantouyou.png" alt="">
				</view>
			</view>



		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {
			console.log("我的")

		},
		onShow() {
			console.log("我的")
		},
		methods: {
			gotosezhi() {
				uni.navigateTo({
					url: "/pages/shezhi/shezhi"
				})
			},
			gotokangbaobao() {
				uni.navigateTo({
					url: "/pages/kangBaby/kangBaby"
				})
			},
			gotoCaiPuShouCang() {
				uni.navigateTo({
					url: "/pages/dishCollect/dishCollect"
				})
			},
			gotoBaoBao() {
				uni.navigateTo({
					url: "/pages/baby/baby"
				})
			},
			gotoShouCang() {
				uni.navigateTo({
					url: "/pages/baikeshoucang/baikeshoucang"
				})
			},
			shareToggle() {
				this.$refs.share.open()
			},
			nicheng(){
				uni.navigateTo({
					url:'/pages/xiugainichen/xiugainichen'
				})
			},
			dishCollect(){
				uni.navigateTo({
					url:'/pages/dishCollect/dishCollect'
				})
			},
			kangBaby(){
				uni.navigateTo({
					url:'/pages/kangBaby/kangBaby'
				})
			},
			shezhi(){
				uni.navigateTo({
					url:'/pages/shezhi/shezhi'
				})
			}
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-image: url(/static/img/beijing.png);
		background-size: 100% 100%;


	}

	.zuishangcen {
		margin-top: 12%;
		display: flex;
	}

	.zuishangcen text {
		font-size: 30px;
		width: 100px;
		text-align: left;
		font-weight: bold;
		margin-left: 5%;
		height: 30px;
		line-height: 30px;
		display: inline-block;
	}

	.tupianhezi1 {
		margin-left: 40%;
		display: inline-block;
		height: 30px;
		width: 30px;
		display: flex;

	}

	.duanxintupian {

		height: 30px;
		width: 30px;
		margin: auto;
	}


	.header {
		margin-left: 30px;
		margin-top: 70px;
		display: flex;
	}

	.header text {
		display: inline-block;
		font-size: 20px;
		height: 22px;
		line-height: 22px;
	}

	.header image {
		display: inline-block;
		width: 22px;
		height: 22px;
	}

	.baobao {
		width: 100px;
		margin-top: 10px;
		margin-left: 30px;
		display: inline-block;
		height: 25px;
		background: white;
		border-radius: 10px;
	}

	.baobao text {
		display: inline-block;
		height: 30px;
		line-height: 25px;
		width: 100px;
		text-align: center;
	}

	.nav {
		width: 88%;
		margin: 40px 6% 30px 6%;
		background-color: white;
		border-radius: 12px;
		box-shadow: 10px 10px 100px 10px #e9e9e9;
	}

	.nav image {
		width: 50px;
		height: 50px;
		
		border-radius: 50%;
	}

	.nav text {
		width: 67%;
		margin-left: 10px;
		display: inline-block;
		height: 50px;
		font-size: 19px;
		line-height: 50px;
		text-align: left;
	}

	.nav .jiantou {
		width: 20px;
		height: 20px;
	}

	.shang {
		margin-top: 15px;
		display: flex;
		width: 89%;
		height: 60px;
		margin-left: 20px;
		margin-right: 20px;

		margin-top: 15px;
		border-bottom: 1px solid gray;
	}

	.zhong {
		margin-top: 15px;
		display: flex;
		width: 89%;
		height: 60px;
		margin-left: 20px;
		margin-right: 20px;
		border-bottom: 1px solid gray;
	}

	.xia {
		margin-top: 15px;
		display: flex;
		width: 89%;
		height: 60px;
		margin-left: 20px;
		margin-right: 20px;
		margin-bottom: 10px;
	}

	.jiantouhezi {

		display: inline-block;
		width: 50px;
		height: 50px;
		display: flex;
	}

	.nav .jiantou {

		background: white;
		margin: auto;

	}

	.navzhongwai {
		margin-top: 15px;
		width: 89%;
		height: 60px;
		margin-left: 20px;
		margin-right: 20px;
		margin-bottom: 15px;
		border-radius: 12px;
		background: white;
		box-shadow: 10px 10px 100px 10px #ececec;
	}

	.navzhong {
		display: flex;
		width: 88%;
		margin: 5px 6% 30px 6%;
		background-color: white;
		border-radius: 12px;
	}

	.navzhong image {
		width: 50px;
		height: 50px;
		
		border-radius: 50%;
	}

	.navzhong text {
		width: 67%;
		margin-left: 10px;
		display: inline-block;
		height: 50px;
		font-size: 19px;
		line-height: 50px;
		text-align: left;

	}

	.navzhong .jiantou {
		width: 20px;
		height: 20px;
		background: white;
		margin: auto;
	}

	.navxiawai {
		display: flex;
		flex-direction: column;
		margin-top: 15px;
		width: 89%;
		margin-left: 20px;
		margin-right: 20px;
		margin-bottom: 15px;
		border-radius: 12px;
		background: white;
		box-shadow: 10px 10px 100px 10px #ececec;
	}

	.navxiashang {
		display: flex;
		width: 88%;
		margin: 20px 6% 20px 6%;
		background-color: white;



	}

	.navxiaxia {
		display: flex;
		width: 88%;
		margin: 0px 6% 20px 6%;
		padding-top: 20px;
		background-color: white;
		border-top: 1px solid #dfdfdf;
	}

	.navxiawai image {
		width: 50px;
		height: 50px;
	
		border-radius: 50%;
	}

	.navxiawai text {
		width: 67%;
		margin-left: 10px;
		display: inline-block;
		height: 50px;
		font-size: 19px;
		line-height: 50px;
		text-align: left;
	}

	.navxiawai .jiantouhezi {
		display: flex;
		width: 50px;
		height: 50px;
	}

	.navxiashang .jiantou {
		width: 20px;
		height: 20px;
		background: white;
		margin: auto;
	}

	.navxiaxia .jiantou {
		width: 20px;
		height: 20px;
		background: white;
		margin: auto;

	}
</style>
